<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores';

const router = useRouter();
const userStore = useUserStore();

// 组件挂载时初始化用户状态
onMounted(() => {
  userStore.initializeAuth();
});

// 用户登出
const handleLogout = () => {
  userStore.logout();
  router.push('/login');
};
</script>

<template>
  <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
    <div class="container mx-auto flex items-center justify-between">
      <a @click.prevent="router.push('/')" href="#" class="text-2xl font-bold text-rose-500 flex items-center">
        <font-awesome-icon icon="seedling" class="text-rose-500 mr-2" />
        花礼相伴
      </a>
      <div class="hidden lg:block w-1/3">
        <div class="relative">
          <input type="text" placeholder="搜索鲜花、场景..." 
            class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
          <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
        </div>
      </div>
      <nav class="hidden md:flex space-x-6">
        <a @click.prevent="router.push('/')" href="#" class="text-gray-600 hover:text-rose-500">首页</a>
        <a @click.prevent="router.push('/categories')" href="#" class="text-gray-600 hover:text-rose-500">分类</a>
        <a @click.prevent="router.push('/cart')" href="#" class="text-gray-600 hover:text-rose-500">购物车</a>
      </nav>
      <div class="flex items-center space-x-4">
        <a @click.prevent="router.push('/cart')" href="#" class="p-2 relative">
          <font-awesome-icon icon="shopping-cart" class="text-gray-600 text-xl" />
          <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
        </a>
        
        <!-- 未登录状态 -->
        <template v-if="!userStore.checkIsLoggedIn">
          <a @click.prevent="router.push('/login')" href="#" class="hidden md:block text-gray-600 hover:text-rose-500">登录</a>
          <a @click.prevent="router.push('/register')" href="#" class="hidden md:block text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</a>
        </template>
        
        <!-- 已登录状态 -->
        <template v-else>
          <div class="hidden md:flex items-center space-x-3">
            <div class="flex items-center space-x-2">
              <img 
                :src="userStore.getUserAvatar" 
                :alt="userStore.getDisplayName"
                class="w-8 h-8 rounded-full object-cover"
              >
              <span class="text-gray-700">{{ userStore.getDisplayName }}</span>
            </div>
            <div class="relative group">
              <button class="text-gray-600 hover:text-rose-500">
                <font-awesome-icon icon="chevron-down" class="text-sm" />
              </button>
              <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                <a @click.prevent="router.push('/user-center')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                <a @click.prevent="router.push('/orders')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的订单</a>
                <a @click.prevent="router.push('/favorites')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的收藏</a>
                <div class="border-t border-gray-100"></div>
                <a @click.prevent="handleLogout" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <!-- 移动端搜索栏 -->
    <div class="mt-3 relative md:hidden">
      <input type="text" placeholder="搜索鲜花、场景..." 
        class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
      <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
    </div>
  </header>
</template>

<style scoped>
a {
  cursor: pointer;
}
</style>
